Skip to content

Refactor: UI colors for consistency and accessibility - #7

Merged
dariemcarlosdev merged 1 commit into
masterfrom
development
Jul 25, 2026
Merged

Refactor: UI colors for consistency and accessibility#7
dariemcarlosdev merged 1 commit into
masterfrom
development

Conversation

@dariemcarlosdev

@dariemcarlosdev dariemcarlosdev commented Jul 25, 2026

Copy link
Copy Markdown
Collaborator

Refactor: UI colors for consistency and accessibility

Replaced gradient text and borders with solid teal-cyan-aqua-600 across headings, buttons, and FAQ items for improved consistency and accessibility. Updated FAQ link and button ring colors for better contrast. Fixed a minor typo in ContactForm.razor.

Summary by CodeRabbit

  • Bug Fixes

    • Corrected the contact badge heading so it displays “Get In Touch” without an extra character.
  • Style

    • Updated landing page and services highlights from gradient text to a solid teal color.
    • Refined the hero illustration panel’s background styling.
    • Improved FAQ borders, open-state shadows, and link colors with the teal palette.
    • Updated the active “Let’s Talk” navigation highlight color.

Replaced gradient text and borders with solid teal-cyan-aqua-600 across headings, buttons, and FAQ items for improved consistency and accessibility. Updated FAQ link and button ring colors for better contrast. Fixed a minor typo in ContactForm.razor.
Copilot AI review requested due to automatic review settings July 25, 2026 23:56
@coderabbitai

coderabbitai Bot commented Jul 25, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

The changes update landing-page text and panel styling, FAQ colors and open-state borders, the header navigation ring color, and the contact badge text.

Changes

Visual updates

Layer / File(s) Summary
Landing-page emphasis styling
Features/Landing/Components/*.razor
Landing headline emphasis changes from gradient-clipped text to solid teal, and the hero illustration wrapper no longer specifies an explicit gradient background.
FAQ and navigation color styling
Features/Legal/Components/Faq.razor.css, Layout/Header.razor
FAQ borders, open-state shadow, inline-link color, and the desktop “Let’s Talk” active ring use updated colors.
Contact badge text
Features/Contact/Components/ContactForm.razor
The contact badge text gains a leading p.

Estimated code review effort: 2 (Simple) | ~5 minutes

Suggested reviewers: copilot

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main change: a UI color refactor for consistency and accessibility.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch development

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@dariemcarlosdev
dariemcarlosdev removed the request for review from Copilot July 25, 2026 23:57
@dariemcarlosdev
dariemcarlosdev merged commit e7ad8c7 into master Jul 25, 2026
2 of 4 checks passed

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@Features/Landing/Components/HeroWarmTealWash.razor`:
- Line 22: Localize every listed user-facing string using the established
localized accessor and add matching resource keys:
Features/Landing/Components/HeroWarmTealWash.razor lines 22-22 (“Less
busywork.”), Features/Landing/Components/Mission.razor lines 22-23 (“Smart
Technology”) and 43-45 (“empower businesses”),
Features/Landing/Components/Services.razor lines 22-22 (“You Focus on Growing
and Making Money.”), Layout/Header.razor line 29 (“Let's Talk”), and
Features/Contact/Components/ContactForm.razor line 9 (“Get In Touch”).

In `@Features/Legal/Components/Faq.razor.css`:
- Around line 159-160: Update the hover styling for the .faq-inline-link
selector to use a darker, higher-contrast color such as `#0e7490` instead of
`#06b6d4`, while preserving the new dark base color and other link styles.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 993a486f-5d80-4bfb-b082-85cb32e24962

📥 Commits

Reviewing files that changed from the base of the PR and between 627dff3 and 63485b4.

📒 Files selected for processing (6)
  • Features/Contact/Components/ContactForm.razor
  • Features/Landing/Components/HeroWarmTealWash.razor
  • Features/Landing/Components/Mission.razor
  • Features/Landing/Components/Services.razor
  • Features/Legal/Components/Faq.razor.css
  • Layout/Header.razor

<h1 class="text-5xl sm:text-6xl lg:text-5xl xl:text-6xl leading-[1.05] mb-6 tracking-tight">
<span class="entrance entrance-2 block font-bold text-gray-900">Smart systems.</span>
<span class="entrance entrance-3 block font-bold bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">Less busywork.</span>
<span class="entrance entrance-3 block font-bold text-teal-cyan-aqua-600">Less busywork.</span>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Localize the touched user-facing strings.

These Razor segments bypass localization. Use @L["Key"] or the project’s established localized accessor and add the corresponding resource keys.

  • Features/Landing/Components/HeroWarmTealWash.razor#L22-L22: localize Less busywork.
  • Features/Landing/Components/Mission.razor#L22-L23: localize Smart Technology.
  • Features/Landing/Components/Mission.razor#L43-L45: localize empower businesses.
  • Features/Landing/Components/Services.razor#L22-L22: localize You Focus on Growing and Making Money.
  • Layout/Header.razor#L29-L29: localize Let's Talk.
  • Features/Contact/Components/ContactForm.razor#L9-L9: localize Get In Touch.
📍 Affects 5 files
  • Features/Landing/Components/HeroWarmTealWash.razor#L22-L22 (this comment)
  • Features/Landing/Components/Mission.razor#L22-L23
  • Features/Landing/Components/Mission.razor#L43-L45
  • Features/Landing/Components/Services.razor#L22-L22
  • Layout/Header.razor#L29-L29
  • Features/Contact/Components/ContactForm.razor#L9-L9
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@Features/Landing/Components/HeroWarmTealWash.razor` at line 22, Localize
every listed user-facing string using the established localized accessor and add
matching resource keys: Features/Landing/Components/HeroWarmTealWash.razor lines
22-22 (“Less busywork.”), Features/Landing/Components/Mission.razor lines 22-23
(“Smart Technology”) and 43-45 (“empower businesses”),
Features/Landing/Components/Services.razor lines 22-22 (“You Focus on Growing
and Making Money.”), Layout/Header.razor line 29 (“Let's Talk”), and
Features/Contact/Components/ContactForm.razor line 9 (“Get In Touch”).

Source: Coding guidelines

Comment on lines 159 to +160
.faq-inline-link {
color: #0891b2;
color: #40676B;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Keep the FAQ link readable on hover.

The new dark base color is appropriate, but the existing #06b6d4 hover color is low-contrast for normal text on a white background. Use a darker hover color such as #0e7490.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@Features/Legal/Components/Faq.razor.css` around lines 159 - 160, Update the
hover styling for the .faq-inline-link selector to use a darker, higher-contrast
color such as `#0e7490` instead of `#06b6d4`, while preserving the new dark base
color and other link styles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant